<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="账单详情" @leftClick="back"></my-navbar>
		<!-- #endif -->
		<view class="content">
			<view class="flex-btw">
				<text class="prop">原始单号</text>
				<text>{{data.related_order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">单据类型</text>
				<text>{{data.type==1?'订单':'退货单'}}</text>
			</view>
			<!-- <view class="flex-btw">
				<text class="prop">用户名称</text>
				<text>{{data.nickname}}</text>
			</view> -->
			<view class="flex-btw" v-if="type==1">
				<text class="prop">下单金额</text>
				<text style="color:#E84B4B">￥{{data.order_money}}</text>
			</view>
			<view class="flex-btw" v-if="data.type==1">
				<text class="prop">配送金额</text>
				<text style="color:#E84B4B">￥{{data.send_money}}</text>
			</view>
			<view class="flex-btw" v-if="data.type==2">
				<text class="prop">退货金额</text>
				<text style="color:#E84B4B">￥{{data.send_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账单号</text>
				<text>{{data.order_sn}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账期</text>
				<text>{{data.payment_days}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">账单金额</text>
				<text style="color:#E84B4B">￥{{data.account_money}}</text>
			</view>
			<view class="flex-btw">
				<text class="prop">差异金额</text>
				<text style="color:#E84B4B">￥{{data.diff_money}}</text>
			</view>

			<view class="flex-btw" v-if="type==2">
				<text class="prop">应付金额</text>
				<text style="color:#E84B4B">￥{{data.order_money}}</text>
			</view>
			<view class="flex-btw" v-if="type==2">
				<text class="prop">实付金额</text>
				<text style="color:#E84B4B">￥{{data.collect_money}}</text>
			</view>
			<view class="flex-btw" v-if="type==2">
				<text class="prop">抹零金额</text>
				<text style="color:#E84B4B">￥{{data.zero_money}}</text>
			</view>
			<view class="flex-btw" v-if="type==2">
				<text class="prop">未付金额</text>
				<text style="color:#E84B4B">￥{{data.uncollected_money}}</text>
			</view>

			<view class="flex-btw">
				<text class="prop">对账状态</text>
				<text>{{data.account_status==1?'已对账':'未对账'}}</text>
			</view>
			<view class="flex-btw" v-if="type ==1">
				<text class="prop">结算状态</text>
				<text v-if="data.status==0" style="color:#E84B4B">未结算</text>
				<text v-else-if="data.status==1" style="color:#67C23A">已结算</text>
			</view>
			<view class="flex-btw" v-else-if="type ==2">
				<text class="prop">结算状态</text>
				<text v-if="data.status==0" style="color:#E84B4B">未结算</text>
				<text v-else-if="data.status==1" style="color:#E6A23C">部分结算</text>
				<text v-else-if="data.status==2" style="color:#67C23A">全部结算</text>
			</view>


			<view class="good_info">
				<view class="title"> 商品信息 </view>
				<view class="sign_good" v-for="(item, index) in goodsList" :key="index">
					<view class="flex-middle top">
						<view class="imgs flex-middle">
							<img class="img" :src="item.img" mode="aspectFit" alt="">
							<!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
						</view>
						<text class="name">{{item.goods_name}}</text>
						<text class="spu">{{item.spu_name}}</text>
					</view>
					<view class="row ">
						<text>对账数量：{{item.account_num}}</text>
						<text v-if="data.type==1">配送数量：{{item.send_num}}</text>
						<text v-else>退货数量：{{item.return_num}}</text>
					</view>
					<view class="row ">
						<text>对账单价：￥{{item.account_price}}</text>
						<text v-if="data.type==1">配送单价：￥{{item.send_price}}</text>
						<text v-else>退货单价：￥{{item.return_price}}</text>
					</view>
					<view class="row ">
						<text>对账金额：￥{{item.account_money}}</text>
						<text v-if="data.type==1">配送金额：￥{{item.send_money}}</text>
						<text v-else>退货金额：￥{{item.return_money}}</text>
					</view>
					<view>备注：<text class="note">{{item.remark}}</text></view>
				</view>
			</view>
		</view>
		<view class="export flex-center" @click="exportAction">导出</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <a ref="exp" href="" ></a> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				data: {},
				goodsList: [], //商品列表
				type: null,
			};
		},
		onLoad(option) {
			this.type = option.type; //1：在线支付，2：货到付款
			$https('GET', 'getBillDetail', {
				id: option.id,
				type: option.type
			}, res => {
				if (res.data.errcode == 0) {
					var list = res.data.data;
					// var ms = Number(list.created_at+'000');
					// var now = new Date();
					// now.setTime(ms);
					// var date = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()+ ' ' + now.getHours()+':'+now.getMinutes()+':'+now.getSeconds()
					// list.createdTime = date;
					this.goodsList = list.goods_info;
					this.data = list;
				} else {
					uni.showToast({
						title: res.data.errmsg,
						icon: 'none'
					});
				}
			})
		},
		methods: {
			//uni.request 的 reponseType不支持blob格式。。只能手写请求
			exportAction() {
				let pay_type = this.type, //1：在线支付，2：货到付款
					order_type = this.data.type, //1：订单 2：退货单
					addType = '' + pay_type + order_type,
					id = this.data.id,
					url, name;

				switch (addType) {
					case '11': {
						url = 'export_online_info_order';
						name = "在线支付订单";
						break;
					};
				case '12': {
					url = 'export_online_info';
					name = "在线支付退货单";
					break;
				};
				case '21': {
					url = 'export_offline_info_order';
					name = "货到付款订单";
					break;
				};
				case '22': {
					url = 'export_offline_info';
					name = "货到付款退货单";
					break;
				};
				}
				// #ifdef H5
				var xhr = new XMLHttpRequest();
				xhr.open('POST', getApp().globalData.rootUrl + '/partner/' + url);
				xhr.responseType = 'blob';
				xhr.setRequestHeader('content-type', 'application/json');
				xhr.setRequestHeader('Authorization', uni.getStorageSync("copartner_token"));
				xhr.send(JSON.stringify({
					id
				}));
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						const link = document.createElement("a");
						let blob = new Blob([xhr.response], {
							type: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
						});
						link.style.display = "none";
						link.href = URL.createObjectURL(blob);
						link.download = name;
						document.body.appendChild(link);
						link.click();
						document.body.removeChild(link);
					}
				}
				// #endif
				// #ifdef MP-WEIXIN
				wx.downloadFile({
					url: `${getApp().globalData.rootUrl}/partner/${url}?id=${id}`,
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync("copartner_token"),
					},
					success: (res) => {
						// console.log(res)
						wx.openDocument({
							filePath: res.tempFilePath,
							success: (result) => {
								console.log(result)
							}
						})
					}
				})

				// wx.request({
				// 	url: getApp().globalData.rootUrl + '/partner/'+ url, // 请求地址
				// 	data: {id},  // 请求参数
				// 	method: 'POST',
				// 	header: { // 根据自己需求设定
				// 	  'Content-Type': 'application/json',
				// 	  'Authorization': uni.getStorageSync("copartner_token"),
				// 	},
				// 	responseType: 'arraybuffer',
				// 	success:res=>{
				// 	      let blob = new Blob([xhr.response], {
				// 	        type:
				// 	          "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
				// 	      });
				// 		wx.navigateTo({
				// 			url:URL.createObjectURL(blob),
				// 		})
				// 	//       link.style.display = "none";
				// 	//       link.href = URL.createObjectURL(blob);
				// 	//       link.download = name;
				// 	//       link.click();
				// 	}
				// })
				// #endif
				// exportMethod(res, name) {
				//   let fileReader = new FileReader();
				//   fileReader.readAsText(res, "utf-8");
				// //   fileReader.readAsArrayBuffer(res);
				//   fileReader.onload = function() {
				//     try {
				// //       let jsonData = JSON.parse(this.result); // 说明是普通对象数据，后台转换失败+
				// //       if (jsonData.errcode) {
				// // 		console.log(jsonData.errmsg)
				// // //         Message.error(jsonData.errmsg);
				// //       }
				//     } catch (err) {
				//       const link = document.createElement("a");
				//       let blob = new Blob([res], {
				//         type:
				//           "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
				//       });
				//       link.style.display = "none";
				//       link.href = URL.createObjectURL(blob);
				//       link.download = name;
				//       document.body.appendChild(link);
				//       link.click();
				//       document.body.removeChild(link);
				//     }
				//   };
				// },
			},
			back() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.content {
			padding: 20rpx 30rpx 100rpx;
			font-size: 32rpx;

			>view {
				margin-bottom: 40rpx;

				// color:#9A9A9A;
				.prop {
					color: #191919;
				}
			}

			.good_info {
				padding-bottom: 40rpx;

				.title {
					margin-bottom: 14rpx;
				}

				.sign_good {
					font-size: 24rpx;
					background: #fff;
					border-radius: 14rpx;
					padding: 20rpx 40rpx;
					margin-top: 20rpx;

					+.sign_good {
						margin-top: 20rpx;
					}

					.top {
						margin-bottom: 20rpx;

						.imgs {
							width: 120rpx;
							height: 120rpx;
							position: relative;

							.logo {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
							}

							.img {
								width: 120rpx;
								max-height: 100rpx;
								margin-right: 40rpx;
							}
						}

						.name {
							margin-left: 20rpx;
						}
					}

					.row {
						margin-bottom: 20rpx;

						text:first-child {
							display: inline-block;
							width: 60%;
						}
					}

					.note {
						color: #9A9A9A;
					}

					.spu {
						margin-left: 20rpx;
						padding: 4rpx 8rpx;
						background: #f5f5f5;
						border-radius: 8rpx;
						font-size: 24rpx;
						transform: scale(0.8);
					}
				}

			}

		}

		.export {
			background: $dgreen;
			color: #fff;
			width: 280rpx;
			padding: 20rpx;
			border-radius: 60rpx;
			position: fixed;
			bottom: 40rpx;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
</style>
